<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- v-if的值是true或false 
            true：表示该元素会被渲染到页面上
            false：表示该元素不会被渲染到页面上。（注意：不是修改了css样式，是这个元素压根没有加载）
         -->
        <div v-if="true">{{msg}}</div>
        <br>
        <button @click="count++">点我加一</button>
        <h3>{{count}}</h3>

        <!-- v-if和v-else中间不能断开 -->
        <img :src="imgP1" v-if="count % 2 === 1">
        <!-- <img :src="imgP2" v-if="count % 2 === 0"> -->
        <!-- 为了提高效率，可以使用v-else指令 -->
        <img :src="imgP2" v-else> <br>

        温度：<input type="number" v-model="temp"><br><br>
        <!-- 天气：<span v-if="temp < 10">寒冷</span>
        <span v-if="temp > 10 && temp <= 25">凉爽</span>
        <span v-if="temp > 25">炎热</span> -->

        天气：<span v-if="temp <= 10">寒冷</span>
        <span v-else-if="temp  <= 25">凉爽</span>
        <span v-else>炎热</span>

        <br><br><br>

        <!-- 
            v-show指令是通过修改元素的css样式的display属性来达到显示和隐藏的
            1，如果一个元素在页面上被频繁的隐藏和显示；建议使用v-show，因为此时使用v-if开销比较大
            2，v-if的优点：页面加载速度快，提高了页面渲染效率
         -->
        <div v-show="true">看到我?</div>

        <!-- template 元素只是起到占位作用的不会影响页面的结构 -->
        <template>

        </template>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '条件渲染',
                count: 0,
                imgP1: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.mH9YLFEL5YdVxJM82mjVJQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
                imgP2: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.d0uSI7WjUmxhaR_MXssxRQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
                temp: 0
            }
        })
    </script>
</body>

</html>